<template>
  <vxe-modal
    v-model="visible"
    :width="1024"
    :title="title"
    resize
    showZoom
    showFooter
    @close="$emit('close')"
  >
    <qm-table
      :data="{ data: activitys }"
      :showPager="false"
      :showView="false"
      :showEdit="false"
      :showDelete="false"
      :showToolbar="false"
      :showCheckbox="false"
      :options="{ maxHeight: '800px' }"
    >
      <qm-table-column field="taskName" width="180">环节名称</qm-table-column>
      <qm-table-column field="formStatusUpdate">
        表单联动
        <template v-slot:content="{ row }">
          <el-input type="textarea" v-model="row['formStatusUpdate']"></el-input>
        </template>
      </qm-table-column>
      <qm-table-column field="className" width="150">
        参与者类型
        <template v-slot:content="{ row }">
          <el-select v-model="row['className']" @change="selectChange">
            <el-option
              v-for="item in actors"
              :key="item.className"
              :value="item.className"
              :label="item.displayName"
            ></el-option>
          </el-select>
        </template>
      </qm-table-column>
      <qm-table-column field="needChoose" width="130">
        是否需要选人
        <template v-slot:content="{ row }">
          <el-switch v-model="row['needChoose']" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </qm-table-column>
      <qm-table-column field="needChoose" width="130">
        是否需要保存
        <template v-slot:content="{ row }">
          <el-switch v-model="row['needSave']" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </qm-table-column>
      <template v-slot:moreBtn="{ row }">
        <el-button type="text" @click="setTaskActorAttr(row)">参与者属性</el-button>
        <el-button type="text" @click="setTaskProps(row)">扩展属性</el-button>
      </template>
    </qm-table>

    <vxe-modal
      v-model="xxxActorModel.visible"
      :width="800"
      :height="630"
      :title="xxxActorModel.title"
      @close="xxxActorModel.visible = false"
      destroy-on-close
      :showFooter="xxxActorModel.compName && !['CurrentUserActor', 'CreatorActor'].includes(xxxActorModel.compName)"
    >
      <component
        :is="xxxActorModel.compMap[xxxActorModel.compName]"
        v-if="xxxActorModel.compName"
        :models="xxxActorModel.models"
        :controlData="xxxActorModel.controlData"
      ></component>
      <template #footer>
        <el-row class="qm-table-form-row">
          <el-button
            type="primary"
            :loading="xxxActorModel.saveLoading"
            @click="actorModelSave"
            icon="el-icon-circle-check"
          >保 存</el-button>
          <el-button @click="xxxActorModel.visible = false" icon="el-icon-circle-close">取消</el-button>
        </el-row>
      </template>
    </vxe-modal>

    <vxe-modal
      v-model="taskPropModel.visible"
      :loading="taskPropModel.loading"
      :width="800"
      :height="630"
      :title="taskPropModel.title"
      destroy-on-close
    >
      <act-ext-task-prop
        @loaded="taskPropModel.loading = false"
        v-if="taskPropModel.visible"
        :definitionId="taskPropModel.definitionId"
        :taskName="taskPropModel.taskName"
      ></act-ext-task-prop>
    </vxe-modal>

    <template #footer>
      <el-row class="qm-table-form-row">
        <el-button
          type="primary"
          :loading="saveLoading"
          @click="save"
          icon="el-icon-circle-check"
        >保 存</el-button>
        <el-button @click="$emit('close')" icon="el-icon-circle-close">取消</el-button>
      </el-row>
    </template>
  </vxe-modal>
</template>

<script>
import AccountActor from "@/views/workflow/actExtTaskActorAttr/accountActor";
import CreatorActor from "@/views/workflow/actExtTaskActorAttr/creatorActor";
import CurrentUserActor from "@/views/workflow/actExtTaskActorAttr/currentUserActor";
import DepartmentActor from "@/views/workflow/actExtTaskActorAttr/departmentActor";
import GroupActor from "@/views/workflow/actExtTaskActorAttr/groupActor";
import PositionActor from "@/views/workflow/actExtTaskActorAttr/positionActor";
import TaskHandlerActor from "@/views/workflow/actExtTaskActorAttr/taskHandlerActor";
import ActExtTaskProp from "@/views/workflow/actExtTaskProp/list";
import request from "@/utils/request";
import _ from "lodash";

export default {
  name: "task-actor",
  components: {
    AccountActor,
    CreatorActor,
    CurrentUserActor,
    DepartmentActor,
    GroupActor,
    PositionActor,
    TaskHandlerActor,
    ActExtTaskProp,
  },
  props: {
    value: Boolean,
    title: String,
    activitys: Array,
    actors: Array,
  },
  data() {
    return {
      visible: false,
      xxxActorModel: {
        visible: false,
        title: "设置参与者",
        models: {},
        controlData: {},
        compName: "",
        compMap: {
          AccountActor: AccountActor,
          CreatorActor: CreatorActor,
          CurrentUserActor: CurrentUserActor,
          DepartmentActor: DepartmentActor,
          GroupActor: GroupActor,
          PositionActor: PositionActor,
          TaskHandlerActor: TaskHandlerActor,
        },
        saveLoading: false,
      },
      taskPropModel: {
        visible: false,
        loading: false,
        title: "扩展属性",
        taskName: "",
        definitionId: "",
      },
      __isDirty: false,
      saveLoading: false,
    };
  },
  watch: {
    value(visible) {
      this.visible = visible;
      this.__isDirty = false;
    },
  },
  methods: {
    selectChange() {
      this.__isDirty = true;
    },
    setTaskActorAttr: function (model) {
      if (this.__isDirty) {
        this.notifyError("数据已更改，请先保存数据。");
        return;
      }
      if (!model.className || model.className == "null") {
        this.notifyError("请先选择参与者类型。");
        return;
      }
      let url = "/workflow/actExtTaskActorAttr/getTaskActorAttrModel";
      request({
        url: url,
        method: "post",
        data: { ...model },
      })
        .then((vm) => {
          this.xxxActorModel = _.extend({}, this.xxxActorModel, vm || {});
          // this.xxxActorModel.models = vm.models;
          // this.xxxActorModel.controlData = vm.controlData;
          let li = model.className.lastIndexOf(".");
          this.xxxActorModel.compName = model.className.substr(li + 1);
          this.xxxActorModel.visible = true;
        })
        .catch((e) => {
          this.xxxActorModel.visible = false;
        });
    },
    setTaskProps: function (model) {
      this.taskPropModel.definitionId = model.definitionId;
      this.taskPropModel.taskName = model.taskName;
      this.taskPropModel.visible = true;
      this.taskPropModel.loading = true;
    },
    save() {
      let postModel = { activitys: this.activitys, pageAction: "view" };
      this.saveLoading = true;
      request({
        url: "/workflow/actExtTaskActor/save",
        method: "post",
        data: postModel,
      })
        .then((r) => {
          this.saveLoading = false;
          this.__isDirty = false;
          if (r && r.success) {
            this.notifySuccess(r.message || "保存成功");
          } else {
            this.notifyError(r.message || "保存失败");
          }
        })
        .catch((e) => {
          this.saveLoading = false;
          this.notifyError((e || {}).message || "保存失败");
        });
    },
    actorModelSave() {
      let postModels = this.xxxActorModel.models;

      if (
        !this.xxxActorModel.urls ||
        !this.xxxActorModel.urls.save ||
        _.isEmpty(postModels)
      ) {
        this.notifyError("没有指定保存的url或postModels");
        return;
      }

      let url = this.xxxActorModel.urls.save;
      this.xxxActorModel.saveLoading = true;

      request({
        url: url,
        method: "post",
        data: postModels,
      })
        .then((r) => {
          this.xxxActorModel.saveLoading = false;
          if (r && r.success) {
            this.notifySuccess(r.message || "保存成功");
          } else {
            this.notifyError(r.message || "保存失败");
          }
          this.xxxActorModel.visible = false;
        })
        .catch((e) => {
          this.xxxActorModel.saveLoading = false;
          this.notifyError((e || {}).message || "保存失败");
        });
    },
  },
};
</script>

<style scoped>
.qm-table-form-row {
  text-align: right;
}
</style>
